<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="layui/css/layui.css"/>
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<form id="addProductPicture" class="layui-form" action="">
			<%-- <div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>id</label>
				<div class="layui-input-inline">
					<input  type="text" id="id" placeholder="请输入id"
						lay-verify = "required" name="loginName" class="layui-input">
				</div>--%>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>产品小图品:</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="uploadProductPicture">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
	                <img id="imgFace" style="width: 120px" src="" /><br />
                    <input type="hidden" name="picture" id="picture" value="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>所属产品:</label>
				<div class="layui-input-inline">
					<select name="classId" id="classId">
					    <option value="">选择种类</option>
					    <c:choose>
					        <c:when test="${empty Product }"></c:when>
					        <c:otherwise>
					            <c:forEach items="${Product }" var="u">
					            <option value="${u.id }">${u.name }</option>
					            </c:forEach>
					        </c:otherwise>
					    </c:choose>
					    
					</select>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="createProductPicture">提交</button>
				<button type="reset" class="layui-btn" lay-submit>取消</button>
				</div>
			</div>
		</form>
		
		<script>
			layui.use(['form','layer','upload'],function(){
				var form = layui.form,$ = layui.$,layer = layui.layer,upload = layui.upload;
				
				//执行实例
				  var uploadInst = upload.render({
				    elem: '#uploadProductPicture' //绑定元素
				    ,url: '../ProductPictureAdminServlet?req=upload' //上传接口
				    ,done: function(res){
				    	 //回显图片
				    	  layer.msg(res.message,{icon:6});
				    	  $("#imgFace").attr("src","../"+res.message);
				    	  //保存名字
				    	  $("#picture").val(res.message);
				    }
				    ,error: function(){
				    }
				  });
				
				//23d66d84-fae1-45d5-bd07-b694662fe579
				form.on('submit(createProductPicture)',function(data){
					//layer.msg("提交动作");
					// post把表单数据发送到服务器端
					// 使用序列化的时候 input的name属性当成参数名字  ，值是参数值
					var str = $("#addProductPicture").serialize();
					$.post(
						"http://localhost:8080/Dream/ProductPictureAdminServlet?req=ProductPictureAdd",
						str,
						function(res){
							if(res.success){
						   	 //先得到当前iframe层的索引
							var index = parent.layer.getFrameIndex(window.name); 
							//再执行关闭 
							parent.layer.close(index);  
							//关闭父级页面的表格
							parent.layui.table.reload('table');
						   }else{
						   	layer.alert("添加失败");
						   }
						},
						"json"
					)
					
//					$.post(
//						"http://stuapi.ysdjypt.com/api/CreateUser",
//						{"token":"23d66d84-fae1-45d5-bd07-b694662fe579",
//						 "loginName":$("#LoginName").val(),
//						"pwd":$("#password").val(),
//						"email":$("#email").val(),
//						"mtel":$("#phone").val()
//						},
//						function(res){
//							console.log(res);
//						},
//						"json"
//					)
					return false;// 停留在这里
				})
				
			})
			
		</script>
		
	</body>
</html>
